.buy{
  left: $page_margin;
  right: 0;
  z-index: 100;
  position: fixed;
  &-list{
    position: relative;
  }

  &-item{
    width: fit-content;
    color: $theme_text_color;
    padding: 4px;
    display: flex;
    position: absolute;
    opacity: 0;
    background: $theme_color;
    align-items: center;
    border-radius: 60px;
    transition-duration: 500ms;
    transition-property: transform, opacity;
  }
  &-avatar{
    width: 46px;
    height: 46px;
    margin-right: 10px;
    border-radius: 50%;
  }
  &-text{
    font-size: 24px;
    max-width: 480px;
    padding-right: 20px;
  }
  @keyframes buy-record {
    15%{
      opacity: 0;
    }
    35%{
      opacity: 1;
    }
    65%{
      opacity: 1;
    }
    85%{
      opacity: 0;
    }
  }
  &-active{
    animation: buy-record 6s;
  }
}